<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">所属单位：</label>
            <el-select
                v-model="searchForm.depId"
                class="m-2"
                placeholder="请选择所属单位"
                style="width: 155px"
                :disabled="localTypeUnit != '1'"
            >
                <el-option
                    v-for="item in depIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">排班周期：</label>
            <el-date-picker
                style="width: 260px"
                v-model="dateTime"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :size="'default'"
                :shortcuts="shortcuts"
            />
        </div>
        <div class="filter-item">
            <label for="">姓名：</label>
            <el-input
                v-model="searchForm.userRealName"
                placeholder="请输入员工姓名"
                style="width: 155px"
            />
        </div>

        <div class="filter-item">
            <label for="">班组：</label>
            <el-select
                v-model="searchForm.teamId"
                class="m-2"
                clearable
                placeholder="请选择班组"
                style="width: 145px"
            >
                <el-option
                    v-for="item in groupList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">班次：</label>
            <el-select
                v-model="searchForm.classId"
                class="m-2"
                clearable
                placeholder="请选择班次"
                style="width: 145px"
            >
                <el-option
                    v-for="item in classesShowList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <el-button
                type="primary"
                @click="getWorkCalendarByTime"
            >查询</el-button>
        </div>
        <div class="filter-item">
            <el-button
                type="primary"
                @click="reset"
            >重置</el-button>
        </div>
        <div class="filter-item">
            <el-button
                type="warning"
                @click="exportList"
            >导出</el-button>
        </div>
        <div class="filter-item">
            <el-button
                size="default"
                type="success"
                @click="updateSearch"
            >更新排班表</el-button>
        </div>
    </div>
    <div
        style="position: relative"
        id="currentSchedule"
    >
        <el-table
            v-loading="dataLoading"
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-class-name="handleCellClassName"
        >
            <el-table-column
                label="姓名"
                prop="realName"
                width="60"
                v-if="tableData && tableData.length > 0"
            >
                <template #default="scope">
                    <div>
                        {{ scope.row.realName }}
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                :label="
                    moment(item.planTime).format('MM-DD') +
                    '\n' +
                    daysOfWeekForday(item.planTime)
                "
                :prop="item.planClassNames"
                v-for="(item, index) in tableData[0].workPlanPOList"
                v-if="tableData && tableData.length > 0"
                :key="item.id"
                min-width="44"
                align="center"
                border
                stripe
            >
                <template #default="scope">
                    <el-popover
                        v-if="scope.row.workPlanPOList[index]"
                        :ref="`popover${item.planClassNames}`"
                        :trigger="
                            moment(item.planTime).isBefore(moment(), 'day')
                                ? 'contextmenu'
                                : 'hover'
                        "
                        placement="top"
                        style="overflow: hidden; height: 300px"
                        @show="
                            handleCurrentPlanClassNames(
                                scope.row.workPlanPOList[index]
                                    .planClassIdsListVo,
                                scope.row.workPlanPOList[index]
                            )
                        "
                    >
                        <template #reference>
                            <div style="
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    width: 100%;
                                    min-height: 28px;
                                ">
                                <div
                                    v-for="m in scope.row.workPlanPOList[index]
                                        .planClassIdsListVo"
                                    :key="m"
                                >
                                    <div
                                        class="planClassIdsty"
                                        :style="{
                                            backgroundColor: m.color,
                                            color: '#fff',
                                        }"
                                    >
                                        {{ classIdTranslater(m.id) }}
                                    </div>
                                </div>
                            </div>
                        </template>
                        <div class="scopeBox">
                            <div class="dialogTitle">
                                <p>调整班次</p>
                                <!-- <el-icon
                                    color="#333"
                                    style="font-size: 12px"
                                    @click="popoverVisible = false"
                                >
                                    <Close />
                                </el-icon> -->
                            </div>

                            <el-scrollbar
                                class="classList"
                                height="166"
                            >
                                <div
                                    class="classItem"
                                    v-for="item in classesShowList"
                                    :style="{
                                        backgroundColor: item.statusTrigger
                                            ? item.color
                                            : '#fff',
                                        color: item.statusTrigger
                                            ? '#fff'
                                            : '#666',
                                    }"
                                    @click="
                                        item.statusTrigger = !item.statusTrigger
                                    "
                                    :key="item.name"
                                >
                                    {{ item.className }}
                                </div>
                            </el-scrollbar>
                            <div class="dialogBtn">
                                <el-button
                                    type="default"
                                    size="small"
                                    style="padding: 0"
                                    text
                                    @click="handleClear()"
                                >清空</el-button>
                                <el-button
                                    type="primary"
                                    size="small"
                                    style="padding: 0"
                                    text
                                    @click="
                                        handleSave(
                                            scope.row.workPlanPOList[index]
                                        )
                                    "
                                >保存</el-button>
                            </div>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            v-model:current-page="searchForm.pageNo"
            v-model:page-size="searchForm.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            class="paginationStyle"
        />
    </div>
    <el-dialog
        v-model="showNamedetailaVisible"
        title="员工详情"
        width="700"
    >
        <div style="margin: -20px 20px 0">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">员工姓名：</label>
                        <span>{{ rowDetail.realName }}</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">手机号码：</label>
                        <span>{{ rowDetail.phone }}</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">所属组织：</label>
                        <span>{{ rowDetail.depId }}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="classTitle">排班表</div>

        <div class="filter">
            <div class="filter-item">
                <label for="">排班周期：</label>
                <el-date-picker
                    style="width: 240px"
                    v-model="dateTimeRow"
                    type="daterange"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :size="'default'"
                    :shortcuts="shortcuts"
                />
            </div>

            <div class="filter-item">
                <label for="">班次：</label>
                <el-select
                    v-model="searchFormRow.classId"
                    class="m-2"
                    placeholder="请选择班次"
                    style="width: 120px"
                >
                    <el-option
                        v-for="item in classesShowList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="filter-item">
                <el-button
                    size="default"
                    type="warning"
                    @click="getWorkCalendarByTime"
                >查询</el-button>
            </div>
        </div>
        <div style="margin-bottom: 10px">
            <el-button
                size="default"
                type="primary"
                @click="handleadjustStaff"
            >调整员工</el-button>
            <el-popover
                placement="bottom"
                :width="80"
            >
                <template #reference>
                    <el-button
                        size="default"
                        type="primary"
                    >调整班次</el-button>
                </template>
                <el-scrollbar
                    class="classList"
                    height="100"
                >
                    <el-button
                        class="classItem"
                        :type="
                            item.statusTrigger ? item.statusAct : item.status
                        "
                        v-for="item in classesList"
                        @click="item.statusTrigger = !item.statusTrigger"
                        :key="item.name"
                    >{{ item.name }}</el-button>
                </el-scrollbar>
                <div class="dialogBtn">
                    <el-button
                        type="plain"
                        style="padding: 5px 0 0 5px"
                        text
                    >清空</el-button>
                    <el-button
                        type="primary"
                        style="padding: 5px 0 0 5px"
                        text
                    >保存</el-button>
                </div>
            </el-popover>
        </div>

        <el-table
            ref="multipleTableRef"
            :data="tableDataRow"
            style="width: 100%"
            height="200"
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                type="selection"
                width="55"
            />
            <el-table-column
                property="planTime"
                label="日期"
            >
            </el-table-column>
            <el-table-column
                property="teamId"
                label="所属班组"
            >
                <template #default="scope">
                    {{ teamIdTranslater(scope.row.teamId) }}
                </template>
            </el-table-column>
            <el-table-column
                property="planClassNames"
                label="已排班次"
            />
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showNamedetailaVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="showNamedetailaVisible = false"
                >
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog
        v-model="adjustStaffVisible"
        title="提示"
        width="400"
    >
        <div style="margin: -20px 20px 0">
            <el-row :gutter="20">
                <el-col :span="24">
                    <div class="grid-content">
                        <label for="">已选数据：</label>
                        <span>{{ rowDateList.length }}条</span>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="grid-content">
                        <label for="">原排班员工：</label>
                        <span>{{ rowDetail.realName }}</span>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="grid-content">
                        <label for="">新排班员工：</label>
                        <el-select
                            v-model="newUserId"
                            placeholder="请选择新员工"
                            style="width: 160px"
                        >
                            <el-option
                                v-for="item in userList"
                                :key="item.id"
                                :label="item.realname"
                                :value="item.id"
                            />
                        </el-select>
                    </div>
                </el-col>
            </el-row>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="adjustStaffVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="submitAdjustStaff()"
                >
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog
        v-model="updatePlanVisible"
        title="更新"
        width="400"
    >
        <div class="filter-item">
            <label for="">排班周期：</label>
            <el-date-picker
                style="width: 260px"
                v-model="updateTime"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :size="'default'"
                :shortcuts="shortcuts2"
                :disabled-date="disabledDate"
            />
        </div>
        <div style="line-height: 2; margin: 20px 0">
            <p>
                <el-icon
                    color="#e6a23c"
                    style="
                        font-size: 16px;
                        font-weight: 600;
                        vertical-align: middle;
                        margin: -2px 6px 0 0;
                    "
                    @click="popoverVisible = false"
                >
                    <Warning />
                </el-icon>是否确认更新？【注：按最新排班计划更新排班表，已调整班次及人员将会被覆盖】
            </p>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updatePlanVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="submitUpdatePlan()"
                >
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { ElMessage } from "element-plus";
import moment from "moment";
import { onMounted, reactive, ref, watch } from "vue";
// api
import schedulingHttp from "@/https/scheduling.js";
import userHttp from "@/https/user.js";
import { Warning } from "@element-plus/icons-vue";
const nowTime = new Date().getTime();
const day = new Date().getDay();
const oneDayTime = 24 * 60 * 60 * 1000;
const month = new Date().getMonth();
const dateTime = ref([
    // "2024-04-01",
    // "2024-04-30",
    new Date().setDate(1),
    new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
]);
const updateTime = ref([
    // "2024-04-01",
    // "2024-04-30",
    moment(new Date()),
    new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
]);
const dateTimeRow = ref([
    new Date().setDate(1),
    new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
]);
const shortcuts = [
    {
        text: "本年",
        value: () => {
            return [
                moment().startOf("year"),
                moment().endOf("year"),
            ];
        },
    },
    {
        text: "本月",
        value: () => {
            return [
                moment().startOf("month"),
                moment().endOf("month"),
            ];
        },
    },
    {
        text: "下月",
        value: () => {
            return [
                moment().add(1, 'month').startOf("month"),
                moment().add(1, 'month').endOf("month"),
            ];
        },
    },
    {
        text: "本周",
        value: () => {
            return [
                moment().startOf("week"),
                moment().endOf("week"),
            ];
        },
    },
    {
        text: "下周",
        value: () => {
            return [
                moment().add(1, 'week').startOf("week"),
                moment().add(1, 'week').endOf("week"),
            ];
        },
    },
    {
        text: "本日",
        value: () => {
            return [
                moment(),
                moment(),
            ];
        },
    },
];
const shortcuts2 = [
    {
        text: "仅本月",
        value: () => {
            const now = new Date();
            const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
            const start = moment(new Date()).add(1, "day");
            return [start, end];
        },
    },
    {
        text: "本月及以后",
        value: () => {
            const now = new Date();
            const end = new Date(now.getFullYear(), now.getMonth() + 2, 0);
            const start = moment(new Date()).add(1, "day");
            return [start, end];
        },
    },
];
const disabledDate = (time) => {
    // 禁用今天之前的日期
    return time.getTime() < Date.now(); // 8.64e7 毫秒数代表一天
};
let searchForm = reactive({
    depId: "2",
    userRealName: null,
    teamId: null,
    classId: null,
    pageNo: 1,
    pageSize: 50,
});
let searchFormRow = reactive({
    depId: "2",
    userRealName: null,
    teamId: null,
    classId: null,
    pageNo: 1,
    pageSize: 50,
});
const groupList = ref([]);
// 查询班组信息
const getWorkteamsQueryWorkTeams = async () => {
    let params = {
        depId: searchForm.depId,
        pageNo: 1,
        pageSize: 10000,
    };
    const res = await schedulingHttp.workteamsQueryWorkTeams(params);
    if (res.data.code == 200) {
        res.data.data.records.forEach((item) => {
            item.label = item.teamName;
            item.value = item.id;
        });
        groupList.value = res.data.data.records;
    }
};
const depIdList = ref([
    { label: "全部", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const classesShowList = ref([]);
const classesList = ref([]);
watch(
    () => searchForm.depId,
    (val) => {
        getWorkClassQueryWorkClass();
        getWorkClassQueryWorkClassShow();
        getWorkteamsQueryWorkTeams();
        getWorkCalendarByTime();
    },
    { deep: true }
);
// 查询班次信息
const getWorkClassQueryWorkClassShow = async () => {
    let params = {
        depId: searchForm.depId,
        isDelete: "0",
        pageNo: 1,
        pageSize: 1000,
    };
    const res = await schedulingHttp.workClassQueryWorkClass(params);
    if (res.data.code == 200) {
        res.data.data.records.forEach((item) => {
            item.label = item.className;
            item.shortLabel = item.classShortName + "";
            item.value = item.id;
            item.statusTrigger = false;
        });
        classesShowList.value = res.data.data.records;
    }
};
// 查询班次信息
const getWorkClassQueryWorkClass = async () => {
    let params = {
        depId: searchForm.depId,
        // isDelete: "",
        pageNo: 1,
        pageSize: 1000,
    };
    const res = await schedulingHttp.workClassQueryWorkClass(params);
    if (res.data.code == 200) {
        res.data.data.records.forEach((item) => {
            item.label = item.className;
            item.shortLabel = item.classShortName + "";
            item.value = item.id;
            item.statusTrigger = false;
        });
        classesList.value = res.data.data.records;
    }
};
const teamIdTranslater = (teamId) => {
    let teamName = "";
    groupList.value.forEach((item) => {
        if (item.value == teamId) {
            teamName = item.label;
        }
    });
    return teamName;
};
const classIdTranslater = (classId) => {
    let className = "";
    if (classId) {
        classesList.value.forEach((item) => {
            if (item.value == classId) {
                className = item.shortLabel;
            }
        });
        return className;
    } else {
        return "休";
    }
};
const handleClear = () => {
    classesShowList.value.forEach((item) => {
        item.statusTrigger = false;
    });
};
const handleSave = async (item) => {
    let newPlanClassIds = [];
    let newPlanClassNames = [];
    classesShowList.value.forEach((m) => {
        if (m.statusTrigger == true) {
            newPlanClassIds.push(m.id);
            newPlanClassNames.push(m.className);
        }
    });
    let params = {
        ...item,
        planClassIds:
            newPlanClassIds.length > 0 ? newPlanClassIds.join(",") : "",
        planClassNames:
            newPlanClassNames.length > 0 ? newPlanClassNames.join(",") : "",
    };
    const res = await schedulingHttp.workPlanUpdateUserWorkPlan(params);
    if (res.data.code == 200) {
        ElMessage({
            message: "修改成功",
            type: "success",
        });
        getWorkCalendarByTime();
    }
};
const localTypeUnit = ref(Storage.localGet("depId"));
searchForm.depId = localTypeUnit.value;
const dataLoading = ref(false);
const tableData = ref([]);
const tableDataRow = ref([]);
const popoverVisible = ref(false);
const handleCurrentPlanClassNames = (item, vo) => {
    let includesList = [];
    vo.planClassIdsListVo.forEach((m) => {
        if (m.statusTrigger) {
            includesList.push(m.id);
        }
    });
    classesShowList.value.forEach((k) => {
        if (includesList.includes(k.id)) {
            k.statusTrigger = true;
        } else {
            k.statusTrigger = false;
        }
    });
};
const updateSearch = () => {
    updatePlanVisible.value = true;
};
const submitUpdatePlan = () => {
    let params = {
        depId: Number(searchForm.depId),
        startTime: updateTime.value[0]
            ? moment(updateTime.value[0]).format("YYYY-MM-DD")
            : "",
        endTime: updateTime.value[1]
            ? moment(updateTime.value[1]).format("YYYY-MM-DD")
            : "",
    };
    schedulingHttp.workPlanBuildWorkPlan(params).then((res) => {
        if (res.data.code == 200) {
            ElMessage({
                message: "更新成功",
                type: "success",
            });
            updatePlanVisible.value = false;
            getWorkCalendarByTime();
        } else {
            ElMessage({
                message: "更新失败！",
                type: "error",
            });
        }
    });
};
// 获取当前日期是周几的文本形式
const daysOfWeek = ref(["日", "一", "二", "三", "四", "五", "六"]);
const daysOfWeekForday = (day) => {
    return daysOfWeek.value[moment(day).day()];
};
const workCalendarList = ref([]);
const getWorkCalendarByTime = async () => {
    let params = {
        startTime: dateTime.value[0]
            ? moment(dateTime.value[0]).format("YYYY-MM-DD")
            : "",
        endTime: dateTime.value[1]
            ? moment(dateTime.value[1]).format("YYYY-MM-DD")
            : "",
    };
    const res = await schedulingHttp.workcalendarGetWorkCalendarByTime(params);
    if (res.data.code == 200) {
        console.log(res);
        res.data.data.forEach((item) => {
            item.data = moment(item.date).format("MM-DD");
        });
        workCalendarList.value = res.data.data;
        search();
    }
};

let total = ref(0);
const handleSizeChange = (val) => {
    searchForm.pageSize = val;
    search();
};
const handleCurrentChange = (val) => {
    searchForm.pageNo = val;
    search();
};
// 查询排班
const search = async () => {
    dataLoading.value = true
    searchFormRow.depId = searchForm.depId;
    dateTimeRow.value = dateTimeRow.value;
    let obj = {
        ...searchForm,
        startTime: dateTime.value[0]
            ? moment(dateTime.value[0]).format("YYYY-MM-DD")
            : "",
        endTime: dateTime.value[1]
            ? moment(dateTime.value[1]).format("YYYY-MM-DD")
            : "",
    };
    let params = dateTime.value ? obj : searchForm;
    if (params.depId == "1") {
        params.depId = "";
    }
    const res = await schedulingHttp.workPlanQueryUserWorkPlanPage(params);
    if (res.data.code == 200) {
        res.data.data.records.forEach((item) => {
            item.workPlanPOList.forEach((m) => {
                m.planClassIdsListVo = [];
                if (m.planClassIds != "" && m.planClassIds != null) {
                    m.planClassIdsList = m.planClassIds.split(",");
                    m.planClassIdsList.forEach((k) => {
                        classesList.value.forEach((t) => {
                            if (k == t.id) {
                                t.statusTrigger = true;
                                m.planClassIdsListVo.push(
                                    JSON.parse(JSON.stringify(t))
                                );
                            } else {
                                t.statusTrigger = true;
                                m.planClassIdsListV = [];
                            }
                        });
                    });
                    m.planClassIdsListVo.forEach((item) => {
                        item.statusTrigger = true;
                    });
                }
            });
        });
        tableData.value = res.data.data.records;
        total.value = res.data.data.total;
        dataLoading.value = false
    }
};
const reset = () => {
    dateTime.value = [
        new Date().setDate(1),
        new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
    ];
    searchForm.depId = localTypeUnit.value;
    searchForm.userRealName = null;
    searchForm.teamId = null;
    searchForm.classId = null;
    getWorkCalendarByTime();
};
const exportList = async () => {
    let obj = {
        ...searchForm,
        startTime: dateTime.value[0]
            ? moment(dateTime.value[0]).format("YYYY-MM-DD")
            : "",
        endTime: dateTime.value[1]
            ? moment(dateTime.value[1]).format("YYYY-MM-DD")
            : "",
        pageNo: 1,
        pageSize: 1000,
    };
    let params = dateTime.value ? obj : searchForm;
    schedulingHttp.workPlanExportUserWorkPlan(params).then((response) => {
        const content = response.data;
        const blob = new Blob([content], { type: "application/ms-excel" });
        let fileName = `排班记录.xls`;
        if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
        }
    });
};
const handleClose = () => { };
const showNamedetailaVisible = ref(false);
const adjustStaffVisible = ref(false);
const updatePlanVisible = ref(false);
const userList = ref([]);
const rowDetail = ref({});
const depNameTranslate = (depId) => {
    let depName = "";
    depIdList.value.forEach((item) => {
        if (item.value == depId) {
            depName = item.label;
        }
    });
    return depName;
};
const showNamedetail = async (row) => {
    showNamedetailaVisible.value = true;
    rowDetail.value = row;
    userList.value.forEach((item) => {
        if (item.id == row.jobNumber) {
            rowDetail.value.phone = item.phone;
            rowDetail.value.depId = depNameTranslate(item.depId);
        }
    });
    searchRow(row);
};

const userQueryUserList = async () => {
    let params = {
        isDelete: 0,
        pageNo: 1,
        pageSize: 10000,
    };
    const res = await userHttp.userQueryUserList(params);
    if (res.data.code == 200) {
        userList.value = res.data.data.records;
    }
};
const searchRow = async (row) => {
    let obj = {
        ...searchFormRow,
        startTime: dateTimeRow.value[0]
            ? moment(dateTimeRow.value[0]).format("YYYY-MM-DD")
            : "",
        endTime: dateTimeRow.value[1]
            ? moment(dateTimeRow.value[1]).format("YYYY-MM-DD")
            : "",
    };
    let params = dateTimeRow.value ? obj : searchForm;
    if (params.depId == "1") {
        params.depId = "";
    }
    params.userRealName = row.jobNumber;
    const res = await schedulingHttp.workPlanQueryUserWorkPlanPage(params);
    if (res.data.code == 200) {
        tableDataRow.value = res.data.data.records[0].workPlanPOList;
    }
};
const rowDateList = ref([]);
const newUserId = ref();
const handleSelectionChange = (rowList) => {
    rowDateList.value = rowList;
};
const handleadjustStaff = () => {
    if (rowDateList.value.length == 0) {
        ElMessage("请选择一条数据");
    } else {
        adjustStaffVisible.value = true;
    }
};
const handleCellClassName = ({ columnIndex, rowIndex }) => {
    if (rowIndex == 0 && columnIndex > 0) {
        console.log(workCalendarList.value[columnIndex - 1], columnIndex);
        // return "weekday";
        if (
            workCalendarList.value[columnIndex - 1] &&
            (workCalendarList.value[columnIndex - 1].dayCodeInfo == "双休日" ||
                workCalendarList.value[columnIndex - 1].dayCodeInfo == "节假日")
        ) {
            return "weekday dayStyle";
        } else {
            return "dayStyle";
        }
    }
};
onMounted(() => {
    getWorkteamsQueryWorkTeams();
    getWorkClassQueryWorkClass();
    getWorkClassQueryWorkClassShow();
    // search();
    userQueryUserList();
    getWorkCalendarByTime();
});
</script>

<style scoped lang="less">
.filter {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    .filter-item {
        margin: 0 15px 15px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        label {
            font-size: 14px;
            color: #333;
            display: inline-block;
            white-space: nowrap;
        }
    }
}
.scopeBox {
    width: 100px;
}
.dialogTitle {
    line-height: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.dialogBtn {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 10px;
}
.classList {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.classItem {
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 80px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666;
    background: #fff;
    cursor: pointer;
    &:hover {
        border: 1px solid #ddd;
        background: #fafafa;
    }
}
.planClassIdsty {
    display: block;
    margin: 1px 0;
    padding: 2px 2px;
    line-height: 1.2;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 26px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666;
    background: #fff;
    cursor: pointer;
}
.grid-content {
    line-height: 2;
}
.classTitle {
    margin: 20px 0;
    font-size: 16px;
    padding-left: 10px;
    border-left: 2px solid #409eff;
}
/deep/ .cell {
    padding: 2px !important;
}
/deep/ .el-table__cell {
    padding: 2px !important;
}
/deep/ .el-table__cell {
    padding: 2px !important;
}
/deep/ .el-table__cell.weekday {
    color: rgba(230, 0, 18, 0.4) !important;
}
/deep/ .el-table__cell.dayStyle {
    font-size: 13px;
    line-height: 1.2;
}
</style>